<template>
	<view class="main-box">
		<image src="../../static/home_bg.jpg" mode="" class="bgImg"></image>
		
		<view class="smart-host">
			<view class="host-head">
				<!-- <i class="iconfont icon"
					:class="[display]"
					:styler="{color:color,'font-size':_size,fontWeight:weight}"
				>
				</i> -->
				<i class="iconfont">&#xe60d;</i>satsun的家
			</view>

			<view class="host-foot">
				6个智能设备 2个智能场景
			</view>
			
		</view>
		
<!-- 手动场景 -->
		<view class="scene">
			<view class="scene-title">
				手动场景
			</view>
			<view :class="{out:o1,outOff:o2}" @click="tapOut">
					<i class="iconfont">&#xe608; 回家</i>
			</view>
			<view :class="{back:b1,backOff:b2}" @click="tapBack">
					<i class="iconfont">&#xe608; 离家</i>
			</view>
		</view>
		
<!-- 智能家电 -->
		<view class="smart-app">
			<view class="app-title">
				智能设备
			</view>
			
			<view class="item" v-for="(item,index) in itemList" :key="index">
				<view class="item-title">
					{{item.itemName}}
				</view>
				
				<span :class="{turnOff:item.statusStyle1,turnOn:item.statusStyle2}">  <!-- class="status" -->
					{{item.status}}
				</span>

				<span class="locate">
					{{item.local}}
				</span>

				<p style="height:1px"></p> <!-- 分隔换行 -->

				<image :src="item.itemImg" mode=""></image>

				<!-- 按钮开关 -->
				<span :class="{switchBtn:item.itemStyle1,lightOn:item.itemStyle2}" @click="tapBtn(index)">  <!-- class="switch-btn" -->
					<i class="iconfont">&#xe676;</i>
				</span>
			</view>
			
		</view>

	</view>
</template>

<style lang="scss" scoped>
	// @import "../../static/icon/home_icon.scss"
	// .main-box{
	// 	width: 100%;
	// 	height: 100%;
	// 	background-image: url(../../static/home_bg.jpg);
	// 	background-size: cover;
	// }
	.bgImg {
		width: 100%;
		height: 100%;
		z-index: -1;
		position: absolute;
	}
	.smart-host{
		color: white;
		font-weight: bold;
		font-size: 26px;
		padding-top: 15rpx;
		padding-left: 40px;
}
	.host-head .iconfont{
		font-size: 25px;
	}
	.host-foot{
		// font-weight: none;
		font-size: 13px;
		margin-top: 5px;
	}


	.scene{
		margin-top: 20px;
		padding-left: 40px;
		font-size: 14px;
		color: white;
	}
	// .scene-title{
		
	// }
	// .scene-btn{
		
	// }
	.out,.back{				//不亮
		width: 100px;
		height: 45px;
		border-radius: 15px;
		background-color: rgba(179, 176, 176, 0.616);
		display: inline-block;
		padding: 5px;
		line-height: 45px;
		text-align: center;
		font-size: 16px;
	}
	.outOff,.backOff{				//不亮
		width: 100px;
		height: 45px;
		border-radius: 15px;
		background-color: #94d0cc;
		display: inline-block;
		padding: 5px;
		line-height: 45px;
		text-align: center;
		font-size: 16px;
	}
	i{
		font-size: 16px;
		margin-right:10px ;
	}
	
	.app-title{
		margin: 15px 0 5px;
		padding-left: 40px;
		font-size: 14px;
		color: white;
	}
	.item{
		background-color: rgba(237, 237, 237, 0.808);
		width: 160px;
		height: 110px;
		display: inline-block;
		margin:5px 2px 10px 20px;
		border-radius: 10px;
	}
	.item-title{
		text-align: center;
		font-size: 16px;
		color: black;
		font-weight: bold;
		margin-bottom: 5px;
	}
	.turnOff{						//未开启
		margin-left:20px;
		border: 1px gray solid;
		border-radius: 5px;
		font-size: 12px;
	}
	.turnOn{						//已开启
		margin-left:20px;
		margin-left:20px;
		border: 1px #74a29f solid;
		border-radius: 5px;
		font-size: 12px;
		color: #74a29f;
	}
	.locate{
		margin-left: 10px;
	}
	.item image{
		margin-top: 5px;
		margin-left: 20px ;
		width: 40px;
		height: 50px;
		display: inline-block;
	}
	
	.switchBtn{
		text-align: center;
		line-height: 30px;
		background-color: rgba(139, 139, 139, 0.55);
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: inline-block;
		margin-left: 55px;
	}
	.switchBtn .iconfont{
		font-size: 28px;
	}
	.lightOn{
		text-align: center;
		line-height: 30px;
		background-color: #94d0cc;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: inline-block;
		margin-left: 55px;
		.iconfont{
			font-size: 28px;
			color: white;
		}
	}
	
</style>

<script>
	import "@../../static/icon/home_icon/iconfont.css";
	export default {
		data(){
			return{
				//回家,离家
				o1:true,
				o2:false,
				b1:true,
				b2:false,
				// 开关按钮
				itemStyle1:true,
				itemStyle2:false,
				// 未开启，已开启
				statusStyle1:true,
				statusStyle2:false,
				status:"未开启",
				//智能家电
				itemList:[
					{itemName:"格力空调",local:"客厅",itemImg:"../../static/air.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
					{itemName:"除湿机",local:"卧室",itemImg:"../../static/dry.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
					{itemName:"油烟机",local:"厨房",itemImg:"../../static/smoke.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
					{itemName:"扫地机",local:"客厅",itemImg:"../../static/clean.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
					{itemName:"冰箱",local:"客厅",itemImg:"../../static/refrigerator.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
					{itemName:"浴缸放水",local:"浴室",itemImg:"../../static/bathtub.jpg",itemStyle1:true,itemStyle2:false,statusStyle1:true,statusStyle2:false,status:"未开启"},
				],
			};
		},
		methods: {
			tapBtn: function(index){
				this.itemList[index].itemStyle1 = !this.itemList[index].itemStyle1;
				this.itemList[index].itemStyle2 = !this.itemList[index].itemStyle2;

				this.itemList[index].statusStyle1 = !this.itemList[index].statusStyle1;
				this.itemList[index].statusStyle2 = !this.itemList[index].statusStyle2;
				
				if(this.itemList[index].status == "未开启"){
					this.itemList[index].status = "已开启";
				}else if(this.itemList[index].status == "已开启"){
					this.itemList[index].status = "未开启";

				}
				
			},
			tapStatus: function(index){
				
			},
			tapOut: function(){
				this.o1 = !this.o1;
				this.o2 = !this.o2;
				if(this.o2){
					for(let i = 0;i < this.itemList.length;i++){
						this.allOut(i);
					}
					this.b1 = true;
					this.b2 = false;
				}
				// else if(this.o1){
				// 	for(let j = 0;j < this.itemList.length;j++){
				// 		this.tapBtn(j);
				// 	}
				// }
			},
			tapBack: function(){
				this.b1 = !this.b1;
				this.b2 = !this.b2;
				if(this.b2){
					for(let i = 0;i < this.itemList.length;i++){
						this.allBack(i);
					}
					this.o1 = true;
					this.o2 = false;
				}
				// else if(this.b1){
				// 	for(let j = 0;j < this.itemList.length;j++){
				// 		this.tapBtn(j);
				// 	}
				// }
			},
			allOut(i){
				this.itemList[i].itemStyle1 = false;
				this.itemList[i].itemStyle2 = true;

				this.itemList[i].statusStyle1 = false;
				this.itemList[i].statusStyle2 = true;

				this.itemList[i].status = "已开启";
			},
			allBack(i){
				this.itemList[i].itemStyle1 = true;
				this.itemList[i].itemStyle2 = false;

				this.itemList[i].statusStyle1 = true;
				this.itemList[i].statusStyle2 = false;

				this.itemList[i].status = "未开启";
			},
		},
	};
</script>
